<template>
  <view class="flex-col page">
	  <scroll-view scroll-y="true" v-if="list.length>0" style="height:calc(100vh)-40px;" @scrolltolower="loadmore">
    <view class="flex-col group">
      <view class="flex-col">
     
        <view class="flex-col list">
			<view class="" v-if="list.length>0">
		  <view class="flex-col list-item" :key="i" v-for="(item, i) in list">
            <view class="justify-between">
              <view class="flex-col group_3">
                <view class="flex-row">
                  <image 
                    :src="item.commentsVisible == 1 ? 'http://16zhuangcheng.cn/FB7B58B285D347E98B4AAA47C4E8ECB9.jpg' : item.address"
                    class="image_1"
                  />
                  <text class="text_3">{{item.commentsVisible == 1 ? '匿名用户' : item.consumerName}}</text>
                </view>
                <view class="flex-row group_5">
                  <text class="text_5">评分</text>
                  <view class="flex-col text-wrapper">
					  <text class="text_7" v-if="item.commentsLevel ==1">非常满意</text>
					 <text class="text_7"  v-else-if="item.commentsLevel ==2">满意</text>
					  <text class="text_7"  v-else-if="item.commentsLevel ==3">一般</text>
					<text class="text_7"  v-else-if='item.commentsLevel ==4'>不满意</text>
					
				  
				  </view>
                </view>
              </view>
              <text class="text_9">{{item.commentsTime}}</text>
            </view>
            <text class="text_11">{{item.commentsDetails}}</text>
			
            <view class="flex-row pic u-flex-wrap ">
              <image v-for="(ii,i) in item.commentsPictures"
                :src="ii"
				@click="previe(i,item.commentsPictures)"
                class="equal-division-item"
              />
            
            </view>
            <view class="flex-col group_7" @click.stop="seeexplan(item)">
              <view class="flex-col section_4">
                <view class="justify-between group_8 view_5">
                
				  <text class="text_13" v-if="item.ordersType ==1">全流程咨询</text>
				  <text class="text_13" v-else-if="item.ordersType ==2">设计优化</text>
				  <text class="text_13" v-else-if="item.ordersType ==3">审核/合同签约</text>
				  <text class="text_13" v-else-if="item.ordersType ==4">主材咨询</text>
				  <text class="text_13" v-else-if="item.ordersType ==5">施工巡检</text>
				  <text class="text_13" v-else-if="item.ordersType ==6">验收</text>
				  <text class="text_13" v-else-if='item.ordersType ==7'>选材咨询</text>
				  <text class="text_13" v-else-if='item.ordersType ==8'>全流程管家</text>
                  <image
                    :src="imgUrl+'16557868142922931567.png'"
                    class="image_6"
                  />
                </view>
                <view class="group_9">
                  <text class="text_15">{{item.provinceName}}{{item.cityName}}{{item.districtName}}</text>
                  <text class="text_17">I</text>
                  <text class="text_19">{{item.roomArea}}m²</text>
                  <text class="text_20">I</text>
                  <text class="text_21">{{item.roomTypeName}}</text>
                </view>
              </view>
              <view class="flex-col items-center text-wrapper_1"><text class="text_22" @click.stop="del(item,i)">删除</text></view>
            </view>
          </view>
		  </view>
		  <view class="flex-col listnone" v-else>
		  	<u-empty style="height: 89vh;" width="250"   mode="data" textSize="30rpx"
		  		icon="http://cdn.uviewui.com/uview/empty/order.png">
		  	</u-empty>
		  </view>
        </view>
      </view>
	  <u-modal :show="show" :title="title" :showCancelButton="true"  @confirm="confirm()">
		  <view class="u-flex-col u-row-center u-col-center w-full">
			  <text class="font-600 u-m-b-20 u-font-36">确认删除评论吗？</text>
			  <text class="font-600 u-m-b-20 u-font-36 u-m-r-20">删除后不可恢复</text>
		  </view>
	  </u-modal>
	  	  <u-loadmore v-show="more" height="100"  fontSize="26" :status="status" />
    </view>
	  </scroll-view>
	  <view style="height:100vh;" class="u-flex-col u-row-center u-col-center" v-else>
	  	<u-empty mode="data"></u-empty>
	  </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
		  more:false,
		imgUrl:this.$IMG_URL,
		  status: 'loading',
        list: [],
		show:false,
		title:'',
		currentItem:{},
		currentIndex:-1,
		content:'确认删除评论吗？删除后不可恢复',
		param:{
			pageSize:10,
			pageNum:1,
			status:5
		},
      };
    },
	created() {
	
	   this.getComment();	
	},
    methods: {
		previe(idx,item){
			uni.previewImage({
						urls: item,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
		},
		del(item,i)
		{
			this.currentIndex=i;
			this.currentItem=item;
		  this.show=true;	
		},
		confirm()
		{
			this.$http('lorder.deleteComments',{
				ordersId:this.currentItem.ordersId
			}).then(r=>{
				
				if(r.code==200)
				{
					this.list.splice(this.currentIndex,1);
					this.show=false;
				}
			});
		},
		loadmore()
		{
						 this.status="loading";
						 this.more=true;
						this.param.pageNum++;
						this.getComment(1)
		},
		getComment(type=0)
		{
			this.$http('lorder.queryComments',this.param).then(r=>{
				if(r.code==200)
				{
					if(type==0)
					{
				    if(r.data.length> 0)
					{
						r.data.forEach(it=>{
							if(it.commentsPictures)
							{
								it.commentsPictures=it.commentsPictures.split(',');
							}
						})
						
					}
					this.list=r.data	
					}else{
							
							if(r.data.length>0)
							{
								
									r.data.forEach(it=>{
										if(it.commentsPictures)
										{
											it.commentsPictures=it.commentsPictures.split(',');
										}
									})
									
							
								 this.list=this.list.concat(r.data);
								 this.status="loadmore";
							}else{
								this.status="nomore";
								
							}
							
						}
					
				}
			});
		},
		seeexplan(item) {
			// 1全流程咨询 2设计优化 3审核/合同签约 4主材咨询 5施工巡检 6验收 7选材咨询 8全流程管家
			if (item.ordersType == 2) {
				// 设计优化
				uni.navigateTo({
					url: '/pages/my/order/orderDetail6?ordersId=' + item.ordersId 
				})
			} else if (item.ordersType == 1) {
				// 全流程咨询
				uni.navigateTo({
					url: '/pages/my/order/orderDetail?ordersId=' + item.ordersId 
				})
			} else if (item.ordersType == 3) {
				// 审核 合同签约
				uni.navigateTo({
					url: '/pages/my/order/orderDetail5?ordersId=' + item.ordersId 
				})
			} else if (item.ordersType == 4) {
				// 主材咨询
				// this.$u.toast('敬请期待');
				uni.navigateTo({
					url: '/pages/my/order/orderDetailZC?ordersId=' + item.ordersId 
				})
			} else if (item.ordersType == 5) {
				// 施工巡检
				uni.navigateTo({
					url: '/pages/my/order/orderDetail4?ordersId=' + item.ordersId 
				})
			} else if (item.ordersType == 6) {
				// 验收
				uni.navigateTo({
					url: '/pages/my/order/orderDetail2?ordersId=' + item.ordersId 
				})
			} else if (item.ordersType == 7) {
				// 选材咨询
				// this.$u.toast('敬请期待');
				uni.navigateTo({
					url: '/pages/my/order/orderDetailXC?ordersId=' + item.ordersId
				})
			} else if (item.ordersType == 8) {
				// 全流程管家
				uni.navigateTo({
					url: '/pages/my/order/orderDetail8?ordersId=' + item.ordersId
				})
			}
		
		},
		
	},
  };
</script>

<style scoped lang="scss">
  .list-item {
    padding: 30rpx 24rpx 32rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .text_11 {
    margin-top: 24rpx;
    align-self: flex-end;
    color: #333333;
    font-size: 28rpx;
    text-align: left;
    width: 568rpx;
  }
  .pic{
	  margin-top: 24rpx;
	  padding-left: 74rpx;
  }
  .equal-division {
    margin-top: 38rpx;
    align-self: flex-end;
  }
  .group_7 {
    margin-top: 24rpx;
    padding-left: 72rpx;
  }
  .group_3 {
    height: 82rpx;
  }
  .text_9 {
    margin-right: 3rpx;
    margin-top: 3rpx;
    color: #999999;
    font-size: 24rpx;
 }
  .equal-division-item {
   
    border-radius: 16rpx;
    width: 187rpx;
    height: 187rpx;
  }
  .equal-division-item_1 {
    margin-left: 10rpx;
    flex: 1 1 187rpx;
    border-radius: 16rpx;
    width: 187rpx;
    height: 187rpx;
  }
  .equal-division-item_2 {
    margin-left: 10rpx;
    flex: 1 1 187rpx;
    border-radius: 16rpx;
    width: 187rpx;
    height: 187rpx;
  }
  .section_4 {
    padding: 22rpx 24rpx 31rpx;
    background-image: url($IMG_URL+'16557868139311192970.png');
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .text-wrapper_1 {
    margin-top: 24rpx;
    padding: 9rpx 19rpx;
    align-self: flex-end;
    background-color: #f6f7f9;
    border-radius: 28rpx;
    width: 132rpx;
  }
  .group_5 {
    margin-top: -11rpx;
    position: relative;
  }
  .group_8 {
    margin-top: 10rpx;
  }
  .group_9 {
    margin-top: 15rpx;
    align-self: flex-start;
  }
  .text_22 {
    color: #333333;
    font-size: 24rpx;
  }
  .image_1 {
    width: 56rpx;
    height: 56rpx;
  }
  .text_3 {
    margin-left: 16rpx;
    margin-right: 53rpx;
    color: #333333;
    font-size: 28rpx;
   }
  .text_5 {
    margin-left: 72rpx;
    margin-bottom: 9rpx;
    color: #1d6aff;
    font-size: 22rpx;
  }
  .text-wrapper {
    margin-left: 12rpx;
    margin-top: 3rpx;
    padding-bottom: 8rpx;
    flex-shrink: 0;
    border-radius: 16rpx;
    background-image: url($IMG_URL+'16557868139265072692.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 32rpx;
  }
  .text_13 {
    margin-bottom: 3rpx;
    color: #1d6aff;
    font-size: 28rpx;
    }
  .image_6 {
    margin-top: 8rpx;
    width: 28rpx;
    height: 28rpx;
  }
  .text_15 {
    color: #333333;
    font-size: 24rpx;
  }
  .text_17 {
    color: #bfbfbf;
    font-size: 24rpx;
  }
  .text_7 {
    margin: 0 11rpx;
    color: #1d6aff;
    font-size: 22rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_1 {
    padding: 0 148rpx;
    background-color: #ffffff;
  }
  .list {
    padding: 20rpx 24rpx 62rpx;
  }
  .group_1 {
    padding: 32rpx 0 19rpx;
  }
  .section_2 {
    margin-right: 35rpx;
    align-self: flex-end;
    background-color: #1d6aff;
    border-radius: 4rpx;
    width: 50rpx;
    height: 8rpx;
  }
  .list-item:last-of-type {
    margin-top: 20rpx;
  }
  .text_1 {
    margin-top: 6rpx;
    color: #666666;
    font-size: 28rpx;
  }
  .text_2 {
    margin-right: 17rpx;
    margin-bottom: 6rpx;
    color: #333333;
    font-size: 28rpx;
  }
  .view_5 {
    margin-top: initial;
  }
  .text_19 {
    color: #333333;
    font-size: 24rpx;
  }
  .text_20 {
    color: #bfbfbf;
    font-size: 24rpx;
  }
  .text_21 {
    color: #333333;
    font-size: 24rpx;
  }
</style>